<template>
    <div>
        <Card :bordered="false" dis-hover class="ivu-mt">
            <Button type="primary" @click="handleAllocation()">新增</Button>
            <Table size="small" :loading="tableLoading" :columns="columns" :data="data" class="ivu-mt-16">
                <template slot-scope="{ row }" slot="projetc_names_arr">
                    <Tag v-for="(item, index) in row.projetc_names_arr" :key="index">{{item}}</Tag>
                </template>
                <template slot-scope="{ row }" slot="status">
                    <Button v-if="row.status ==='1'" type="success" size="small" @click="changeStatus(row)">启用</Button>
                    <Button v-if="row.status ==='0'" type="error" size="small" @click="changeStatus(row)">停用</Button>
                </template>
                <template slot-scope="{ row }" slot="operation">
                    <a @click="handleAllocation(row)">编辑</a>
                    <Divider type="vertical" />
                    <a @click="handleProject(row)">绑定项目</a>
                    <Divider type="vertical" />
                    <a class="deleteBtn" @click="handleDelete(row)">删除</a>
                </template>
            </Table>
        </Card>
        <Modal v-model="modal" :title="edit ? '编辑' : '新增'" draggable :mask-closable= "false" @on-cancel="handleDrawerCancel()">
            <Form :model="formItem" :rules="ruleValidate" ref="formItem" :label-width="80">
                <FormItem label="名称" prop="input">
                    <Input v-model="formItem.input" placeholder="请输入" clearable></Input>
                </FormItem>
                <FormItem label="图标" prop="select">

                    <Select v-model="formItem.select" class="img-select">
                        <Option v-for="item in iconList" :key="`icon-${item.id}`" :value="item.id" :label="`图标${item.id}`">
                            <div class="sel-img">
                                <img :src="item.img" alt="">
                            </div>
                        </Option>
                    </Select>
                    <div class="selected-img">
                        <img :src="selImage(formItem.select)" alt="">
                    </div>
                </FormItem>
                <FormItem label="状态" prop="switch">
                    <i-switch v-model="formItem.switch">
                        <span slot="open">On</span>
                        <span slot="close">Off</span>
                    </i-switch>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleDrawerCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleSubmit('formItem')">确定</Button>
            </div>
        </Modal>
        <Modal v-model="modal1" draggable title="绑定项目" @on-cancel="handleProjectCancel()">
            <Form :model="formItem1" ref="formItem1">
                <FormItem label="" prop="interest">
                    <CheckboxGroup v-model="formItem1.interest">
                        <Checkbox v-for="(item, index) in projectList" :key="index" :label="item.id">{{item.name}}</Checkbox>
                    </CheckboxGroup>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button @click="handleProjectCancel()">取消</Button>
                <Button type="primary" :loading="loading" @click="handleBindSubmit('formItem1')">确定</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
    import { GetRoomList, CreateRoom, UpdateRoom, UpdateRoomStatus, DeteleRoom, RoomBindProject, GetRoomInfo } from '@api/setting';

    export default {
        name: 'diagnosis',
        data () {
            const iconList = [
                {
                    img: require('@/assets/treatmentImg/icon.png'),
                    id: '1'
                },
                {
                    img: require('@/assets/treatmentImg/icon(1).png'),
                    id: '2'
                },
                {
                    img: require('@/assets/treatmentImg/icon(2).png'),
                    id: '3'
                },
                {
                    img: require('@/assets/treatmentImg/icon(3).png'),
                    id: '4'
                },
                {
                    img: require('@/assets/treatmentImg/icon(4).png'),
                    id: '5'
                },
                {
                    img: require('@/assets/treatmentImg/icon(5).png'),
                    id: '6'
                },
                {
                    img: require('@/assets/treatmentImg/icon(6).png'),
                    id: '7'
                },
                {
                    img: require('@/assets/treatmentImg/icon(7).png'),
                    id: '8'
                },
                {
                    img: require('@/assets/treatmentImg/icon(8).png'),
                    id: '9'
                },
                {
                    img: require('@/assets/treatmentImg/icon(9).png'),
                    id: '10'
                },
                {
                    img: require('@/assets/treatmentImg/icon(10).png'),
                    id: '11'
                },
                {
                    img: require('@/assets/treatmentImg/icon(11).png'),
                    id: '12'
                }
            ]

            return {
                modal: false,
                edit: false,
                loading: false,
                tableLoading: false,
                modal1: false,
                formItem: {
                    input: '',
                    select: '1',
                    switch: true
                },
                formItem1: {
                    interest: []
                },
                ruleValidate: {
                    input: [
                        { required: true, message: '项目名不可为空', trigger: 'blur' }
                    ]
                },
                columns: [
                    {
                        title: '名称',
                        key: 'name'
                    },
                    {
                        title: '绑定项目',
                        slot: 'projetc_names_arr'
                    },
                    {
                        title: '状态',
                        slot: 'status'
                    },
                    {
                        title: '操作',
                        slot: 'operation',
                        width: 190
                    }
                ],
                data: [],
                projectList: [],
                iconList
            }
        },
        created () {
            this.onLoad();
        },
        methods: {
            selImage (sel) {
                let reVal = '';
                this.iconList.forEach((item) => {
                    if (item.id === sel) {
                        reVal = item.img
                    }
                })
                return reVal;
            },
            getProjectList (id) {
                /**
                 * @description 治疗详情
                 */
                GetRoomInfo({ id }).then((res) => {
                    if (res) {
                        this.projectList = res.clinic_project_list
                        this.formItem1 = {
                            interest: res.clinic_project_id_arr,
                            id: res.id
                        }
                        this.modal1 = true;
                    }
                })
            },
            onLoad () {
                /**
                 * @description 治疗室列表 默认不传获取全部
                 * @param {Object} param page  {String} 页数
                 * @param {Object} param pageSize {String} 条数/页
                 */
                this.tableLoading = true
                GetRoomList().then((res) => {
                    this.data = res.list
                }).finally(() => {
                    this.tableLoading = false
                })
            },
            handleAllocation (row) {
                this.modal = true;
                if (row) {
                    this.edit = true;
                    this.formItem = {
                        input: row.name,
                        select: row.icon_id,
                        switch: row.status === '1',
                        id: row.id
                    }
                }
            },
            handleProject (row) {
                this.getProjectList(row.id)
            },
            handleProjectCancel () {
                this.modal1 = false;
                this.$refs['formItem1'].resetFields()
            },
            handleDelete (row) {
                const param = {
                    id: row.id
                }
                this.$Modal.confirm({
                    title: '删除治疗室',
                    content: '确定删除当前治疗室<span style="color:#ed4014">' + row.name + '</span>?',
                    onOk: () => {
                        this.deleteSubmit(param);
                    }
                });
            },
            changeStatus (row) {
                const param = {
                    id: row.id,
                    status: row.status === '1' ? '0' : '1'
                }
                this.$Modal.confirm({
                    title: '切换治疗室状态',
                    content: '确定' + (row.status === '1' ? '停用' : '启用') + '当前治疗室?',
                    onOk: () => {
                        this.changeSubmit(param);
                    }
                });
            },
            handleDrawerCancel () {
                this.modal = false;
                this.edit = false;
                this.$refs['formItem'].resetFields()
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        const params = {
                            name: this.formItem.input,
                            status: this.formItem.switch ? '1' : '0',
                            icon_id: `${this.formItem.select}`
                        }
                        if (this.edit) {
                            params.id = this.formItem.id;
                            this.updateSubmit(params);
                        } else {
                            this.createSubmit(params);
                        }
                    } else {
                        console.log('表单校验失败！')
                    }
                })
            },
            handleBindSubmit () {
                this.loading = true;
                const params = {
                    clinic_project_ids: (this.formItem1.interest).join(','),
                    id: this.formItem1.id
                }
                this.bindSubmit(params);
            },
            createSubmit (params) {
                CreateRoom(params).then(() => {
                    this.$Message.success(' 创建成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            updateSubmit (params) {
                UpdateRoom(params).then(() => {
                    this.$Message.success(' 修改成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleDrawerCancel();
                }).catch(() => {
                    this.loading = false;
                })
            },
            deleteSubmit (params) {
                DeteleRoom(params).then(() => {
                    this.$Message.success(' 删除成功');
                    this.onLoad();
                })
            },
            changeSubmit (params) {
                UpdateRoomStatus(params).then(() => {
                    this.$Message.success('状态切换成功');
                    this.onLoad();
                })
            },
            bindSubmit (params) {
                RoomBindProject(params).then(() => {
                    this.$Message.success('绑定成功');
                    this.loading = false;
                    this.onLoad();
                    this.handleProjectCancel();
                }).catch(() => {
                    this.loading = false;
                })
            }

        }
    }
</script>

<style scoped lang="less">

.img-select {
    .ivu-select-dropdown-list {
        overflow: hidden;
        .ivu-select-item {
            padding: 0;
            float: left;
            clear: none;
            border: 1px solid #eeeeee;
            .sel-img{
                width: 98px;
                height: 98px;
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }
        .ivu-select-item-selected {
            border-color: rgba(45, 140, 240, 0.6);
            box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
        }

    }
}
.selected-img{
    width: 98px;
    height: 98px;
    border: 1px solid #eeeeee;
    margin: 10px 0;
    border-radius: 5px;
    overflow: hidden;
    img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

</style>
